<template>
  <div class="content">
    <div class="toolbox-title">
      <div style="font-family: '微软雅黑'; font-size: 18px; font-weight: bold"
        >我的常用
      </div>
      <div style="color: #3d7eff; cursor: pointer" @click="selectBox">
        更多</div
      >
    </div>

    <div class="list">
      <div
        v-for="(item, index) in menu"
        :key="index"
        class="list-item"
        @click="goRouter(item.name)"
        ><a-space direction="vertical" fill :size="15"
          ><div
            style="display: flex; align-items: center; justify-content: center"
            ><div
              class="list-item-box"
              :style="{ backgroundColor: item.backgroundColor }"
              ><div
                ><i
                  style="font-size: 40px; color: #fff"
                  :class="getIcon(item.meta.icon)"
                ></i></div></div></div
          ><div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
            ><div style="margin: 0 auto">{{ item.meta.locale }}</div></div
          ></a-space
        ></div
      >
    </div>
    <ToolBoxModel v-model:visible="modelVisible" @selectMenu="selectMenu" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  import ToolBoxModel from './ToolBoxModel.vue';

  const router = useRouter();
  const modelVisible = ref(false);
  const getIcon = (icon: string) => {
    return `iconfont ${icon}`;
  };

  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i += 1) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  const menu = ref([
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: 'icon-xitongtongjifenxibaobiao',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: '#',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: '#',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: '#',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: '#',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
    {
      id: 1,
      meta: {
        locale: '首页',
        hideInMenu: false,
        icon: '#',
      },
      name: 'homepage',
      path: '/homepage',
      backgroundColor: getRandomColor(),
    },
  ]);

  const selectBox = () => {
    modelVisible.value = true;
  };

  const selectMenu = (data: any) => {
    menu.value = data;
    menu.value.forEach((item) => {
      item.backgroundColor = getRandomColor();
    });
  };

  const goRouter = (name: string) => {
    router.push({
      name,
    });
  };

  onMounted(() => {
    if (localStorage.getItem('ToolBox')) {
      menu.value = JSON.parse(localStorage.getItem('ToolBox') as any);
    }
  });

  onUnmounted(() => {
    localStorage.setItem('ToolBox', JSON.stringify(menu.value));
  });
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 210px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .toolbox {
      &-title {
        width: 100%;
        height: 20%;
        padding: 15px;
        display: flex;
        justify-content: space-between;
      }
    }
    .list {
      width: 100%;
      height: 80%;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      &-item {
        width: 12.5%;
        height: 100%;
        &-box {
          width: 80px;
          height: 80px;
          // background: linear-gradient(
          //   135deg,
          //   rgba(68, 140, 250, 1) 0%,
          //   rgba(68, 140, 250, 1) 0%,
          //   rgba(61, 126, 255, 1) 100%,
          //   rgba(61, 126, 255, 1) 100%
          // );
          border: none;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
</style>
